<template>
  <div v-if="showPage">
    <van-nav-bar title="订单详情" left-arrow :fixed="true" :z-index="9" :border="false" style="background-color: #f44;height: 50px;" @click-left="onClickLeft"/>
    <!--收货地址选择-->
    <AddressCard ref="addressCard" style="margin-top: 51px;" :addressId="order.addressId"></AddressCard>
    <!--订单中商品展示-->
    <van-panel>
      <div v-for="item in itemList" :key="item.id" >
        <van-card :title="item.itemName" :desc="item.description" :price="formatPrice(item.salePrice)" :num="item.buyNum" :thumb="item.itemPic.split('###')[0]" @click-thumb="toDetail(item)">
          <div slot="tags">
            规格：{{ item.itemGg }}
          </div>
        </van-card>
      </div>
      <div v-if="order.orderStatus!='0'" slot="footer">
        <div style="font-size: 15px">
          实付款：<span style="color: red" v-if="order.orderStatus=='1'">{{ formatPrice(order.totalFee) }}</span><span v-else>{{ order.totalFee }}</span>
        </div>
      </div>
    </van-panel>
    <div>
      <van-cell-group>
        <van-field v-model="order.remark" type="textarea" left-icon="comment" placeholder="请输入订单备注" disabled autosize/>
      </van-cell-group>
    </div>
    <div v-if="order.orderStatus==='1'" style="height:50px;width:100%;position: absolute;bottom: 0px;right: 0px;background-color: white;">
      <van-button style="position: absolute;right: 100px;bottom: 0px;width: 100px;height: 50px;" @click="onCancelOrder(order)">取消订单</van-button>
      <van-button type="danger" style="position: absolute;right: 0px;bottom: 0px;width: 100px;height: 50px;" @click="toChoosePay(order)">付款</van-button>
    </div>
    <div v-if="order.orderStatus==='3'">
      <van-button type="danger" style="position: absolute;right: 0px;bottom: 0px;width: 100px;height: 50px;" @click="doConfirmReceive(order)">确认收货</van-button>
    </div>

    <van-panel title="订单信息" style="text-align: left">
      <div style="font-size: 14px">
        <div style="margin-left: 4.5%;">订单编号：<span style="margin-left: 15px;">{{ order.orderNo }}</span></div><br>
        <div style="margin-left: 4.5%;">创建时间：<span style="margin-left: 15px;">{{ order.createTime }}</span></div><br>
        <div style="margin-left: 4.5%;">付款时间：<span style="margin-left: 15px;">{{ order.payTime }}</span></div><br>
        <div style="margin-left: 4.5%;">发货时间：<span style="margin-left: 15px;">{{ order.sendTime }}</span></div><br>
        <div style="margin-left: 4.5%;">完成时间：<span style="margin-left: 15px;">{{ order.finishTime }}</span></div><br>
      </div>
    </van-panel>
  </div>
</template>

<script>
import AddressCard from '@/components/AddressCard'
export default {
  name: 'placeOrder',
  components: {
    AddressCard
  },
  data () {
    return {
      order: null,
      itemList: [], // 商品列表
      buyNum: 0, // 购买件数（直接购买时，将购物件数传输至此）
      leftLabel: '', // 价格左侧 label
      totalPrice: 0, // 总价格
      showPage: false // 页面显示标志位，为解决页面先加载数据还未加载问题
    }
  },
  methods: {
    /**
     * 返回
     */
    onClickLeft () {
      this.$router.go(-1)
    },
    /**
     * 价格格式化
     */
    formatPrice (price) {
      return (price * 100 / 100).toFixed(2)
    },
    /**
     * 查看商品详情
     */
    toDetail (item) {
      this.$router.push({ name: 'detail', query: { itemId: item.itemId } })
    },
    /**
     * 根据订单id查询订单主子表信息
     * @param orderId
     */
    getOrderAndDetailByOrderId (orderId) {
      const self = this
      const param = { orderId: orderId }
      self.axios.get('api/shop/getOrderAndDetailByOrderId', { params: param }).then(resp => {
        if (resp.data.code !== '-1') {
          // 订单主表
          self.order = resp.data.data.order
          // 订单子表
          self.itemList = resp.data.data.orderDetail
          self.showPage = true
        } else {
          self.$toast(resp.data.msg)
        }
      }).catch(error => {
        console.log(error)
      })
    },
    /**
     * 取消订单
     * @param order
     */
    onCancelOrder (order) {
      const self = this
      self.$dialog.confirm({
        title: '提示',
        message: '确认取消选中订单？'
      }).then(() => { // 确认
        const param = { orderDetail: self.itemList, id: order.id, orderStatus: '0' }
        self.axios.post('api/shop/updateShopOrderStatusByOrderId', param).then(resp => {
          if (resp.data.code !== '-1') {
            self.$toast('取消成功')
            // 跳转到订单页面
            self.$router.push({ name: 'orderList', params: { active: order.orderStatus } })
          } else {
            self.$toast(resp.data.msg)
          }
        }).catch(error => {
          console.log(error)
        })
      }).catch(() => { // 取消
        // on cancel
      })
    },
    /**
     * 付款
     * @param id
     */
    toChoosePay (order) {
      this.$router.push({ name: 'pay', query: { order: order } })
    },
    /**
     * 确认收货
     */
    doConfirmReceive (order) {
      const self = this
      self.$dialog.confirm({
        title: '提示',
        message: '确认已经收到货物？'
      }).then(() => { // 确认
        const param = { id: order.id, orderStatus: '4' }
        self.axios.post('api/shop/orderReceiveConfirm', param).then(resp => {
          if (resp.data.code !== '-1') {
            self.$toast('收货完成')
            // 跳转到订单页面
            self.$router.push({ name: 'orderList', params: { active: '4' } })
          } else {
            self.$toast(resp.data.msg)
          }
        }).catch(error => {
          console.log(error)
        })
      }).catch(() => { // 取消
        // on cancel
      })
    }
  },
  mounted () {
    const self = this
    // 订单id
    let orderId = self.$route.query.orderId
    self.getOrderAndDetailByOrderId(orderId)
  }
}
</script>

<style lang="less" scoped>
.van-nav-bar .van-icon {
  color: white;
  vertical-align: middle;
}

.van-nav-bar__title {
  color: white;
}

.van-card__content {
  text-align: left;
}

.van-card__price {
  width: 80%;
  color: black;
}

.van-cell__title {
  text-align: left;
}

.van-panel__footer {
  text-align: right;
}
</style>
